<template>
	<view>
		<view class="top">
			<view class="detail">
				<view class="deail-one">核销码 &nbsp;MC1234-5678-9012 </view>
				<view class="detail-two">车辆:奔驰FWE4/豫A98FHJ</view>
				<view class="br"></view>
				<view class="deail-one">服务内容</view>
				<view class="detail-two" >
					<text>车辆精洗</text>
					<text>￥100</text>
				</view>
				<view class="detail-two" >
					<text>车辆精洗附加费</text>
					<text>￥10</text>
				</view>
				<view class="br"></view>
				<view class="deail-one">订单信息</view>
				<view class="detail-two" >
					<text>原价</text>
					<text>￥110</text>
				</view>
				<view class="detail-two" >
					<text>优惠</text>
					<text>￥20</text>
				</view>
				<view class="detail-two" >
					<text>实付金额</text>
					<text>￥90</text>
				</view>
				<view class="detail-two" >
					<text>订单编号</text>
					<text>1223233445</text>
				</view>
				<view class="detail-two" >
					<text>预约时间</text>
					<text>2023-03-18 19:00:00</text>
				</view>
				<view class="detail-two" >
					<text>支付时间</text>
					<text>2023-03-18 19:14:28</text>
				</view>
				<view class="detail-two" >
					<text>核销时间</text>
					<text>2023-03-18 20:14:28</text>
				</view>
			</view>
			
			<button class="btn" @tap="tapPopup" v-if="sure==0">确认核销</button>
			<button class="btn" disabled="true" v-else>已核销</button>
		<!-- 弹窗 -->
		<popup :show="show" @close="close"></popup>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sure:0,
				show:false,
			}
		},
		methods: {
			// 弹窗
					tapPopup() {
						this.show = true;
					},
				close(close,sure){
				this.sure=sure;
							this.show = close;
						},
			
		}
	}
</script>

<style>
	.br{
		width: 100%;
		height: 7rpx;
		background-color:#efeff5 ;
		margin: 10rpx auto;
	}
.top{
	width: 100vw;
	height: 20vh;
	background-color: #3082fa;
	position: absolute;
}
.detail{
	width: 85%;
	height: 68vh;
	padding: 2vh 5vw 2vh 5vw;
	background-color: white;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 2vh auto;
}
.deail-one{
	font-weight: bold;
	line-height: 5vh;
}
.detail-two{
	font-size: 25rpx;
	line-height: 5vh;
	display: flex;
	justify-content: space-between;
	
}
.btn{
	margin-top: 5vh;
	width: 70vw;
	height: 7vh;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
	background-color: royalblue;
	color: white;
}
.btn[disabled]{
	margin-top: 5vh !important;
	width: 70vw !important;
	height: 7vh !important;
	border-radius: 50rpx 50rpx 50rpx 50rpx !important;
	background-color: royalblue !important;
	color: white !important;
	background-color: #7f7f7f !important;
	
}
.popup {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	z-index: 9998;
}

.popup-info{
	position: fixed;
	width: 550upx;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 30upx;
	padding: 40upx;
	border-radius: 20upx;
	background-color: #fff;
	z-index: 9999;
}
.popup-text{
	text-align: center;
	font-size: 20rpx;
	line-height: 3vh;
	
}
.popup-btn{
	width: 130rpx;
	height: 4vh;
	font-size: 20rpx;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
	
}


</style>
